<template>
	<view class="information">
		<view class="informationwhite">
			<button class="informationwhite-img" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
				<image  class="photo" src="../../static/down.png" v-if="!avatarUrl" mode="widthFix" ></image>
				<image  class="photo"  :src="avatarUrl" v-if="avatarUrl" mode="widthFix" ></image>
				
				<view>设置头像</view>
				<image class="rightico" src="../../static/icon/right.png"></image>
			</button>
		</view>
		<view class="informationwhite">
			<view class="informationwhite-input">
				<view>昵称</view>
				<input  @blur="bindblur" type="nickname" placeholder="请输入"  v-model="nickName"/>
			</view>
			<!-- <view class="informationwhite-input">
				<view>手机号码</view>
				<input  type="text" placeholder="请输入"/>
			</view> -->
		</view>
		
		<view class="button" @click="formSubmit">保存</view>
		
	</view>
</template>

<script>
	import upload from '@/common/upload.js'
	export default {
		
		data() {
			return {
				nickName : '',
				avatarUrl : null
			};
		},
		onLoad() {
			let    that =  this;
			that.$user.getdetails({}).then(res=>{
				that.nickName  = res.data.user.nickname;
				that.avatarUrl  = res.data.user.avatar;
				console.log(res.data.user);
			})
			
		},
		methods: {
			formSubmit(e){
				let that  = this;
				if(!that.avatarUrl){
					uni.showToast({
						title: '头像不能为空',
						icon: "none"
					});return;
				}
				if(!that.nickName){
					uni.showToast({
						title: '昵称不能为空',
						icon: "none"
					});return;
				}
				let parse={
					nickname:that.nickName,
					avatar:that.avatarUrl,
				}
				that.$user.setadd(parse).then(res=>{
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
					if(res.code  ==1){
						uni.switchTab({
							url: '/pages/my/my'
						})
					}
					
					
				})
				
				
				
			},
			
			bindblur(e) {
				this.nickName = e.detail.value; // 获取微信昵称
			},
			bindinput(e){
				this.nickName = e.detail.value; //这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
			},
			onChooseavatar(e){
				let that  = this;
				let {
					avatarUrl
				} = e.detail;
				console.log('上传图片');
				uni.uploadFile({
					url:that.http.baseUrl+'/upload/index',
					filePath: avatarUrl,
					name: 'avatar',
					header: {
					   'token':uni.getStorageSync("user_id")
					},
					success: uploadFileRes => {
						// 注意：这里返回的uploadFileRes.data 为JSON 需要自己去转换
						let data = JSON.parse(uploadFileRes.data);
						if (data.code === 1) {
							that.avatarUrl = data.data;
							console.log(that.avatarUrl);
						}else{
						}
					},
					fail: (error) => {
						alert(222);
						uni.showToast({
							title: error,
							duration: 2000
						});
					},
				});
			},
			
			
		}
	}
</script>

<style lang="less">
	.information {
		width: 750rpx;
		min-height: 100vh;
		background-color: #f6f9f9;
		.informationwhite {
			background-color: #fff;
			margin-top: 20rpx;
			.informationwhite-img {
				display: flex;
				width: 690rpx;
				background-color: #FFFFFF;
				border:none;
				margin: auto;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				.photo {
					display: block;
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
				}
				view {
					padding-left: 30rpx;
					font-size: 36rpx;
					line-height: 150rpx;
				}
				.rightico {
					width: 42rpx;
					height: 46rpx;
					display: block;
					margin-left: auto;
					margin-top: 56rpx;
				}
			}
			.informationwhite-input {
				display: flex;
				width: 690rpx;
				margin: auto;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				font-size: 36rpx;
				border-bottom: 2rpx solid #e3e3e3;
				input {
					text-align: right;
					margin-left: auto;
				}
			}
			.informationwhite-input:last-child {
				border: none;
			}
		}
		.button {
			background-color: #7289FF;
			width: 690rpx;
			line-height: 100rpx;
			margin: auto;
			margin-top: 40rpx;
			border-radius: 60rpx;
			color: #fff;
			font-size: 34rpx;
			text-align: center;
		}
	}
</style>